<template>
  <div>
    <!-- list-type:文件列表的类型--也是设置文件上传的样式  -->
    <!-- action:我们将上传的文件要上传到的地址 -->
    <!-- file-list:上传的文件组成的列表 -->
    <!-- on-preview：点击已经上传的文件所触发的事件，一般都是图片预览 -->
    <!-- limit:控制文件上传的最大数量 -->
    <!-- 如果我们上传头像，那么就只需要上传一张就行，当上传完一张头像图片的时候，我们因该将上传头像的那个按钮给隐藏掉，这就需要用到我们的最大上传数量了，我们进行一个判断，如果我们已经上传的数量大于等于我们的最大上传数量，那么我们就隐藏上传按钮。 -->
    <!-- on-remove:文件列表移除文件时所触发的方法 -->
    <!-- http-request：自定义上传,会覆盖默认上传 -->
    <!-- on-change:文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用 -->
    <!-- before-upload:	上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。 -->
    <div v-show="showProgress">
      <div>
        <!-- percentage:上传进度的百分比，但是，是小数 -->
        上传进度：<el-progress style="width: 180px" :percentage="percent" />
      </div>
    </div>
    <el-upload
      v-show="!showProgress"
      :class="{ disabled: fileComputed }"
      action="#"
      list-type="picture-card"
      :limit="limitNum"
      :file-list="fileList"
      :on-preview="handlePictureCardPreview"
      :on-remove="removePictureCard"
      :http-request="httpRequest"
      :on-change="onChange"
      :before-upload="beforeUpload"
    >
      <i class="el-icon-plus" />
    </el-upload>
    <el-dialog
      title="预览图片"
      :visible.sync="dialogVisible"
      width="500px"
      :before-close="handleClose"
    >
      <img :src="ImgUrl" class="a" />
    </el-dialog>
  </div>
</template>

<script>
import COS from 'cos-js-sdk-v5'
var cos = new COS({
  SecretId: 'AKIDLrGcDdzBDJuSr1363oOzcFpNAsjWTM7m',
  SecretKey: 'TzUzT8mMH7LWIyJcFtQt8ObhslZEnMtm'
})
export default {
  props: {
    limitNum: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      // 上传的文档组成的列表
      fileList: [],
      // 控制预览弹层的显隐
      dialogVisible: false,
      // <img>标签的src地址
      ImgUrl: '',
      // 控制加载进度条的显隐
      showProgress: false,
      // 进度条的百分比(小数,需要×100)
      percent: 0
    }
  },
  computed: {
    // 计算属性,控制添加按钮的显隐
    fileComputed() {
      return this.fileList.length >= this.limitNum
    },
    // 看看是否所有的图片都上传完毕了---用于多选图片上传时的校验
    uploadAllSuccess() {
      // 如何知道所有的文件都上传完成了呢?
      // 我们要知道,我们向COS服务器存的是一个文件对象,这里面有一个状态status属性,我们遍历一遍文件列表,只要所有的文件列表的status属性都是success,就表示所有的文件都上传完成了
      // Array.every()  如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。
      return this.fileList.every((item) => item.status === 'success')
    }
  },
  methods: {
    // 点击预览的操作
    handlePictureCardPreview(file) {
      //   console.log(file)
      this.ImgUrl = file.url
      this.dialogVisible = true
    },
    // 关闭预览弹层
    handleClose() {
      this.dialogVisible = false
    },
    // 删除图片
    removePictureCard(file, fileList) {
      // file:我们要删除的文件
      // fileList:删除完之后的文件列表
      // this.fileList:我们当前的文件列表
      //   console.log(file, fileList)
      this.fileList = this.fileList.filter((item) => item.uid !== file.uid)
    },
    // 自定义上传
    httpRequest(file) {
      this.showProgress = true
      //   console.log(file)
      //   PUT Object 接口可以上传一个对象至指定存储桶中
      cos.putObject(
        {
          Bucket: 'ihrm22-test-1316700398' /* 填入您自己的存储桶，必须字段 */,
          Region: 'ap-beijing' /* 存储桶所在地域，例如ap-beijing，必须字段 */,
          Key:
            file.file.uid +
            file.file
              .name /* 存储在桶里的对象键（例如1.jpg，a/b/test.txt），必须字段 */,
          Body: file.file /* 必须，上传文件对象，可以是input[type="file"]标签选择本地文件后得到的file对象 */,
          onProgress: (progressData) => {
            // progressData:上传时的进度信息等
            console.log(JSON.stringify(progressData))
            this.percent = parseInt(progressData.percent * 100)
            setTimeout(() => {
              this.showProgress = false
              this.percent = 0
            }, 500)
          }
        },
        (err, data) => {
          console.log(err || data)
          if (data.statusCode === 200) {
            // 上传成功之后，我们要改变图片的状态，将他的状态设置成为success
            // 并且我们还要将新的图片的url
            const obj = this.fileList.find((item) => item.uid === file.file.uid)
            // console.log(obj)
            obj.status = 'success'
            obj.url = 'https://' + data.Location
          }
        }
      )
    },
    // 图片改变时触发的操作--说白了就是更换图片时触发的操作
    onChange(file, fileList) {
      //   console.log(file, fileList)
      this.fileList = [...fileList]
    },
    // 上传图片之前触发的操作
    beforeUpload(file) {
      //   console.log(file)
      const types = ['image/jpeg', 'image/gif', 'image/bmp', 'image/png']
      if (!types.includes(file.type)) {
        this.$message.error(
          '上传的图片格式必须为:image/jpeg, image/gif, image/bmp, image/png'
        )
        return false
      }
      if (file.size / 1024 / 1024 > 5) {
        this.$message.error('上传的图片大小要不大于5M')
        return false
      }
      return true
    }
  }
}
</script>

<style lang="scss" scoped>
.a {
  margin: 0 auto;
  display: block;
  width: 100%;
}
.disabled {
  ::v-deep {
    .el-upload--picture-card {
      display: none;
    }
  }
}
</style>
